<script>
import countTo from 'vue-count-to'

export default {
  name: 'ParkData',
  components: {
    countTo
  }
}
</script>

<template>
  <div class="park-data-container">
    <div class="header">外卖数据</div>
    <ul>
      <li>
        <span class="text">年度累计售卖（元）</span>
        <span class="count">
          <count-to :startVal="0" :endVal="1001501" :duration="1200"></count-to>
        </span>
      </li>
      <li>
        <span class="text">入驻店铺总数（家）</span>
        <span class="count">
        <count-to :startVal="0" :endVal="98540" :duration="1200"></count-to>
        </span>
      </li>
      <li>
        <span class="text">五星好评（颗）</span>
        <span class="count">
        <count-to :startVal="0" :endVal="847054" :duration="1200"></count-to>
        </span>
      </li>
      <li>
        <span class="text">店铺人数（位）</span>
        <span class="count">
        <count-to :startVal="0" :endVal="5471485" :duration="1200"></count-to>
        </span>
      </li>
    </ul>
  </div>
</template>

<style scoped lang="scss">
.park-data-container {
  background-color: #fff;
  padding: 20px;

  ul {
    list-style: none;
    display: flex;
    margin-top: 10px;

    li {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      span {
        margin: 12px 0;
      }

      .text {
        display: block;
        width: 100%;
        color: #909399;
        font-size: 13px;
      }

      .count {
        display: block;
        width: 100%;
        font-size: 25px;
      }
    }
  }
}
</style>
